<script lang="ts" setup>
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
import { Search } from '@element-plus/icons-vue'
import studentCV from '@/class/studentCV';
import { studentCVStoreHook } from "@/store/modules/studentCV";
import studentDetail from './components/studentDetail.vue'
import type { FormInstance, FormRules } from 'element-plus'
import { getList } from "@/api/cv/enterprise";

const params = reactive({
  search: '', // 查询参数
  current: 1, // 当前页码
  size: 10 // 每页显示条数
});


//搜索
const arr = ref([]);//声明一个新数组
const enterSearch = () => {
  console.log(11111)
  if (params.search !== '') {
    arr.value = tableDataCopy.value.filter(item => item.name.indexOf(params.search) !== -1);
    if (arr.value) {
      tableData.value = arr.value;
      total1.value = arr.value.length;
    }
  } else {
    getDataList();
  }
}

//列表数据
const tableData = ref(
);
const tableDataCopy = ref(
);

const dialogFormVisible = ref(false);
const form = reactive({
  education: 0,
  age: '',
  name: '',
  phone: '',
  sex: '',
  desiredOccupation: '',

})

//详细
const info = ref<studentCV>(new studentCV);
const closeEdit = () => {
  isShow.value = false
}
const success = () => {
  isShow.value = false
}
const handleEdit = (e: studentCV) => {
  info.value = e;
  isShow.value = true;
}
//删除
const { proxy } = getCurrentInstance();
const handleDel = async (e: any) => {
  proxy
    .$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "error",
    })
    .then(async () => {
      await studentCVStoreHook()
        .delete(e)
        .then(res => {
          if (res.code == 200) {
            console.log(res.msg);
            dialogFormVisible.value = false
            getDataList();
          }
        });
    })
    .catch(() => {
      proxy.$message({
        type: "info",
        message: "已取消删除",
      });
    });
}

//分页
const total1 = ref<number>(100);
const handleCurrentChange = ref();

//编辑组件
const isShow = ref(false)


// 获取列表数据
const getDataList = async () => {
  await studentCVStoreHook().getList({
    current: 1,
    size: 10
  })
    .then(rep => {
      if (rep.code == 200) {
        tableData.value = rep.data.data
        tableDataCopy.value = rep.data.data
        total1.value = rep.data.count;
      }
    })
};

onMounted(async () => {
  await getDataList();
});


const formLabelWidth = '80px'
//添加表单
const ref_form = ref<FormInstance>()
const rules = reactive({
  name: [{
    required: true,
    message: "请输入名字",
    trigger: "blur"
  }],
  age: [{
    required: true,
    message: "请输入年龄",
    trigger: "blur"
  }],
  sex: [{
    required: true,
    message: "请输入姓名",
    trigger: "blur"
  }],
  phone: [{
    required: true,
    message: "请输入手机号",
    trigger: "blur"
  }],
  desiredOccupation: [{
    required: true,
    message: "不能为空，请输入",
    trigger: "blur"
  }]
})

const sava = async (ref_form: FormInstance | undefined) => {
  if (!ref_form) return;
  await ref_form.validate((valid, fields) => {
    if (valid) {
      studentCVStoreHook()
        .add({
          education: form.education,
          age: form.age,
          name: form.name,
          sex: form.sex,
          phone: form.phone,
          desiredOccupation: form.desiredOccupation,
        })
        .then(res => {
          if (res.code == 200) {
            console.log(res.msg);
            dialogFormVisible.value = false;
            getList();
          }
        });
    } else {
      return fields;
    }
  });
};

const computedSiteType = (e) => {
  switch (e) {
    case 0: return "专科";
    case 1: return "本科";
    case 2: return "硕士";
  }
}

const options = [
  {
    value: 0,
    label: '专科',
  },
  {
    value: 1,
    label: '本科',
  },
  {
    value: 2,
    label: '硕士',
  }
]

</script>

<template>
  <div class="ve_container">
    <el-row>
      <el-col :span="8">
        <el-input clearable v-model="params.search" placeholder="搜索" @keyup.enter="enterSearch">
          <template #append>
            <el-button type="" :icon="Search" @click="enterSearch" />
          </template>
        </el-input>
        <el-button type="primary" @click="dialogFormVisible = true" style="position: absolute;margin-left: 30px;">
          添加
        </el-button>
      </el-col>
    </el-row>
    <!-- 列表 -->
    <el-table :data="tableData" ref="ruleForms" :border="true" style="margin-top: 30px;">
      <el-table-column fixed prop="name" label="姓名" width="120"></el-table-column>
      <el-table-column fixed prop="education" label="学历" width="120">
        <template #default="scope">
          {{ computedSiteType(scope.row.education) }}
        </template>
      </el-table-column>
      <el-table-column prop="age" label="年龄" width="120" show-overflow-tooltip></el-table-column>
      <el-table-column prop="sex" label="性别" width="100"></el-table-column>
      <el-table-column prop="desiredOccupation" label="期望的职业" width="175"></el-table-column>
      <el-table-column prop="fileId" label="简历" width="175">
        <template #default="scope">
          <!-- 下载简历 -->
          <el-button size="small" @click="handleEdit(scope.row)">查看</el-button>
          <el-button size="small" @click="handleEdit(scope.row)">上传</el-button>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)">详细</el-button>
          <el-button size="small" type="danger" @click="handleDel(scope.row.id)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination small background layout="prev, pager, next" :total="total1" class="mt-4"
      @current-change="handleCurrentChange" v-model:currentPage="params.current" />

    <!-- 详细弹窗 -->
    <studentDetail :isShow="isShow" :info="info" @close-edit="closeEdit" @success="success"></studentDetail>


    <el-dialog v-model="dialogFormVisible" title="新增" width="40%" center>
      <el-form :model="form" ref="ref_form" label-position="left" label-width="100px" :rules="rules">
        <el-form-item label="姓名" prop="name" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="年龄" prop="age" :label-width="formLabelWidth">
          <el-input v-model="form.age" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="性别" prop="sex" :label-width="formLabelWidth">
          <el-input v-model="form.sex" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone" :label-width="formLabelWidth">
          <el-input v-model="form.phone" autocomplete="off" />
        </el-form-item>
        <el-form-item label="学历" prop="education" :label-width="formLabelWidth">
          <el-select v-model="form.education" class="m-2" placeholder="学历">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="期望职位" prop="desiredOccupation" :label-width="formLabelWidth">
          <el-input v-model="form.desiredOccupation" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">关闭</el-button>
          <el-button type="primary" @click="sava(ref_form)">
            添加
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>